<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>zidong</title>
    </head>
    <body>
        <div id="app" ref="imageTofile">
            <button @click="pointIt">打印页面</button>
            <div style="background-color: #fff">
                <div>
                    <!-- <button @click="startDown()">捕获整个页面</button> -->
                </div>
                <div>文字，图片等内容</div>
                <img :src="img" alt="" style="width: 300px" />
                <img :src="img" alt="" style="width: 300px" />
            </div>
            <div>
                <p>1111</p>
                <p>1111</p>
                <p>1111</p>
                <p>1111</p>
                <p>1111</p>
                <p>1111</p>
                <p>1111</p>
                <p>1111</p>
                <p>1111</p>
                <p>1111</p>
                <p>1111</p>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
        <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
        <script>
            // 初始化
            // var vConsole = new VConsole();
        </script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    img: "https://img.zcool.cn/community/01d6d35d5222bfa8012187f4977767.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100"
                },
                mounted() {
                    let s = "www.dod.com.cn";
                    let a = s.split(".", 1);
                    let b = s.split(".", 2);
                    // #  分割一次   2次
                    console.log(a);
                    console.log(b);

                    // this.deal();
                },
                methods: {
                    pointIt() {
                        window.print();
                    },
                    startDown() {
                        window.confirm("是否开始下载？")
                            ? this.toImage()
                            : () => {
                                  return window.alert("失败了");
                              };
                    },
                    toImage() {
                        // imageTofile是给截图范围内的父级元素自定义的ref名称
                        let canvasBox = this.$refs.imageTofile;
                        let width = canvasBox.offsetWidth;
                        let height = canvasBox.offsetHeight;
                        const options = {
                            width,
                            height,
                            backgroundColor: "#fff",
                            useCORS: true,
                            logging: false,
                            scale: 1 //设置放大的倍数
                        };
                        html2canvas(canvasBox, options).then(canvas => {
                            canvas.toBlob(blob => {
                                // toDataURL 图片格式转成 base64
                                let dataURL = canvas.toDataURL("image/png", 1);
                                this.downloadImage(dataURL);
                            });
                        });
                    },
                    deal() {
                        let money = 0;
                        // index注数 要多少次实现不赔
                        for (let index = 5; index < 100; index += 5) {
                            console.log(index);
                            money += index * 2;
                        }
                        console.log("总开销", money);
                    },
                    //下载图片
                    downloadImage(url) {
                        // 如果是在网页中可以直接创建一个 a 标签直接下载
                        let a = document.createElement("a");
                        a.href = url;
                        a.download = "首页截图";
                        a.click();
                    }
                }
            });
        </script>
    </body>
</html>
